<template>
  <div class="nav" v-if="memberData.is_identity_num != 1">
    <scroll class="wrapper-nav"
            ref="wrapperNav"
            :data="memberData"
            :startX="50"
            :click="true"
            :scrollX="true"
            :scrollY="false"
            :eventPassthrough="'vertical'">
      <div class="content style2-nav clearfix"
           v-if='!memberData.is_status_bar || (memberData.is_status_bar &&memberData.is_status_bar!=1)'>
        <!-- 会员中心 -->
        <span class="link"
              :class="[current == 0 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('member')">{{ memberData.ftitle_user }}</span>
        <!-- 分销中心 -->
        <span class="link"
              v-if="((isExistArray(memberData.is_show_distributor,'1')&&memberData.is_wx==1)||(isExistArray(memberData.is_show_distributor,'2')&&memberData.is_app) ||(isExistArray(memberData.is_show_distributor,'3')&&(memberData.is_wx==2||memberData.is_wx==3||memberData.is_wx==0)&&!memberData.is_app))&&memberData.is_agent==1"
              :class="[current == 1 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('fxs')">{{ memberData.ftitle_agent }}</span>
        <!-- 员工 -->
        <span class="link"
              v-if="memberData.user_type==2 && isExistArray(memberData.system_function_model,'5')"
              :class="[current == 2 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('staff-center')">{{ memberData.staff_name }}</span>
        <!-- 门店 -->
        <span class="link"
              v-if="memberData.user_type==3 && isExistArray(memberData.system_function_model,'4')"
              :class="[current == 3 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('store-center')">{{ memberData.store_name }}</span>

        <!-- 订货中心 -->
        <span class="link"
              v-if="memberData.is_wx==1 && memberData.is_check_dhs==1 && isExistArray(memberData.is_show_dhs,'1')"
              :class="[current == 4 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dhs')">{{ memberData.ftitle_dhs_center }}</span>
        <!-- 代理中心 -->
        <span class="link"
              v-if="memberData.is_wx==1 && memberData.is_dls==1 && isExistArray(memberData.is_show_agent,'1')"
              :class="[current == 5 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dls')">{{ memberData.ftitle_agency }}</span>

        <!-- 订货中心 -->
        <span class="link"
              v-if="memberData.is_app && memberData.is_check_dhs==1 && isExistArray(memberData.is_show_dhs,'2')"
              :class="[current == 4 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dhs')">{{ memberData.ftitle_dhs_center }}</span>
        <!-- 代理中心 -->
        <span class="link"
              v-if="memberData.is_app&& memberData.is_dls==1 && isExistArray(memberData.is_show_agent,'2')"
              :class="[current == 5 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dls')">{{ memberData.ftitle_agency }}</span>
  
        <!-- 订货中心 -->
        <span class="link"
              v-if="((memberData.is_wx==2||memberData.is_wx==3 ||memberData.is_wx==0)&&!memberData.is_app) && memberData.is_check_dhs==1 && isExistArray(memberData.is_show_dhs,'3')"
              :class="[current == 4 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dhs')">{{ memberData.ftitle_dhs_center }}</span>
        <!-- 代理中心 -->
        <span class="link"
              v-if="((memberData.is_wx==2||memberData.is_wx==3 ||memberData.is_wx==0)&&!memberData.is_app)&& memberData.is_dls==1 && isExistArray(memberData.is_show_agent,'3')"
              :class="[current == 5 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('dls')">{{ memberData.ftitle_agency }}</span>
        <!-- 供应商中心 -->
        <span class="link"
              v-if="((memberData.is_wx ==1 && isExistArray(memberData.is_show_gys,'1'))||(memberData.is_app ==1 && isExistArray(memberData.is_show_gys,'2'))||(((memberData.is_wx==2||memberData.is_wx==3 ||memberData.is_wx==0) && !memberData.is_app) && isExistArray(memberData.is_show_gys,'3'))) && (memberData.supplier_flag || memberData.is_tgy)"
              :class="[current == 6 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('gys')">{{ memberData.ftitle_gys_center }}</span>
        <span class="link"
              v-if="((isExistArray(memberData.is_show_chaining,'1')&&memberData.is_wx==1)||(isExistArray(memberData.is_show_chaining,'2')&&memberData.is_app) ||(isExistArray(memberData.is_show_chaining,'3')&&(memberData.is_wx==2||memberData.is_wx==3||memberData.is_wx==0)&&!memberData.is_app))&&memberData.is_chaining==1"
              :class="[current == 8 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('linkCenter')">{{memberData.name_chaining_center}}</span>
        <!-- 三三复制 -->
        <span class="link"
              v-if="((isExistArray(memberData.is_show_replicate_center,'1')&&memberData.is_wx==1)||(isExistArray(memberData.is_show_replicate_center,'2')&&memberData.is_app) ||(isExistArray(memberData.is_show_replicate_center,'3')&&(memberData.is_wx==2||memberData.is_wx==3||memberData.is_wx==0)&&!memberData.is_app))&&memberData.has_replicate_rank==1"
              :class="[current == 9 ? 'cur' : '','link'+memberData.is_identity_num]"
              @click="Jump('xxReplicateCenter')">{{memberData.name_replicate_center || '复制中心'}}</span>
      </div>
    </scroll>
  </div>
</template>

<script>
import Vue from 'vue'
import Scroll from '@/components/scroll/index'
// import { publicCenterParam } from '@/api/user/member/memberApi'
export default Vue.extend({
  props: {
    current: {
      type: Number,
      default: 0
    },
    memberData: {
      type: Object
    }
  },
  data() {
    return {
      style: 2
    }
  },
  methods: {
    // 判断数组是否存在某值
    isExistArray(array, val) {
      if (!array) return false
      const ret = array.indexOf(val)
      if (ret == -1) {
        return false
      } else {
        return true
      }
    },
    Jump(url, data) {
      // TODO 小程序使用window.location.href
        window.location.href = url
    }
  },
  components: {
    Scroll
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/variables";
.nav {
  background-color: $default;
  .wrapper-nav {
    width: 710px;
    margin: 0 auto;
    overflow: hidden;
    overflow-x: scroll;
    &::-webkit-scrollbar{
      display: none;
    }
    .style2-nav {
      height: 90px;
      background: $default;
      display: inline-block;
      white-space: nowrap;
      line-height: 90px;
      .link {
        position: relative;
        min-width: 175px;
        display: inline-block;
        text-align: center;
        font-size: 26px;
        color: #333333;
        // margin-top: -30px;
        &.link2{
          width: 355px;
        }
        &.link3{
          width: 236px;
        }
        &.cur {
          font-size: 28px;
          color: #e80001;
          &::after {
            @include gradient(right, #f20b22, rgba(242, 11, 34, 0.1));
          }
        }
        // &::before {
        //   position: absolute;
        //   top: 50%;
        //   right: 0;
        //   content: "";
        //   width: 2px;
        //   height: 30px;
        //   background: #e6e6e6;
        //   transform: translateY(-50%);
        // }
        &:last-child::before {
          width: 0;
        }
        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          display: block;
          content: "";
          background: transparent;
          width: 90px;
          height: 6px;
          // border-radius: 3px;
        }
      }
    }
  }
}
</style>
